<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--父组件-->
<div id="app">
  <async-item></async-item>
</div>

<script src="../js/vue.js"></script>
<script>

  // 父组件
  const app = Vue.createApp({
    data(){
      return {
        msg: '秦晓'
      }
    },
    components: {

    },
  });

  // 注册一个全局异步组件
  app.component('async-item',Vue.defineAsyncComponent(()=>{
    return new Promise((resolve, reject)=>{
      setTimeout(()=>{
        resolve({
          template: `<div>从服务端请求的异步组件</div>`
        })
      },2000)
    })
  }));

  // 挂载vue实例
  app.mount('#app');
</script>
</body>
</html>